<template>
    <div>
        <div>
            <!--size  输入框尺寸，只在 type!="textarea" 时有效  @keydown.enter.native="addPosition"
             addPosInput 控制长度   prefix-icon  框内的图标  @keydown.enter.native 回车执行命令
            -->
            <el-input
                    size="small "
                    class="addPosInput"
                    placeholder="添加职位..."
                    prefix-icon="el-icon-plus"
                    @keydown.enter.native="addPosition"
                    v-model="pos.name">
            </el-input>
            <el-button size="small"  icon="el-icon-plus" type="primary"  @click="addPosition()">添加</el-button>
        </div>
        <div class="posManaMain">
            <!-- stripe 斑马纹  positions 对应到下边的数据 动态变化  border 加边框  @selection-change="handleSelectionChange" 多选项-->
            <el-table
                    :data="positions"
                    stripe
                    border
                    size="small"
                    @selection-change="handleSelectionChange"
                    style="width: 60%">
                <!--这是多选择的列-->
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>

                <el-table-column
                        prop="id"
                        label="编号"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="职位名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="createdate"
                        label="创建时间"
                        width="150">
                </el-table-column>
                <!--操作列-->
                <el-table-column
                        label="操作" >
                    <template slot-scope="scope">
                        <el-button @click="showEditView(scope.$index, scope.row)"     size="small">编辑</el-button>
                        <el-button @click="handleDelete(scope.$index, scope.row)"  type="danger" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
                  <!--批量删除  multipleSelection.length ==0 没有选中的值  批量删除按钮禁用 -->
            <el-button
                    @click="deleteMany"  type="danger" size="small" style="margin-top: 8px" :disabled="multipleSelection.length == 0">
                批量删除
            </el-button>

            <!--编辑弹出框 dialog   :visible.sync="dialogVisible" 弹框提示信息开启还是关闭 -->
            <el-dialog
                    title="修改职位"
                    :visible.sync="dialogVisible"
                    width="30%" >

                    <!--展示的内容-->
                    <div>
                        <el-tag>职位名称</el-tag>
                        <el-input class="updatePosInput" size="small" v-model="updatePos.name" ></el-input>
                    </div>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary"  @click="doUpdate">确 定</el-button>
                  </span>
            </el-dialog>

        </div>
    </div>
</template>

<script>
    export default {
        name: "PosMana",
        data(){
            return {
                pos:{
                    name:""
                }, updatePos:{  //用于绑定修改框的
                    name:'',
                    enabled:false
                },
                positions: [ ],//表单数据
                multipleSelection: [],  //多选回调的数据
                dialogVisible:false,//弹框的标识  默认是不显示

            }
        },  mounted() {
            //一进到页面就调用初始化数据的方法
            this.initPositions();
        },
        methods:{
            //批量删除方法
            deleteMany(){
                this.$confirm('此操作将永久删除【'+ this.multipleSelection.length +'】条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = '?';
                    //遍历multipleSelection来拼接
                    this.multipleSelection.forEach(item=>{
                        ids += 'ids=' + item.id + '&';
                    })
                    this.deleteRequest("/system/basic/pos/" + ids).then(resp => {
                        if (resp) {
                            this.initPositions();
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //多选回调方法
            handleSelectionChange(val) {
                console.info("多选回调方法");
                this.multipleSelection=val;

            },
            //页面加载初始化
            initPositions(){
                //发送一个get请求去获取数据 请求地址是"/system/basic/pos/"
                this.getRequest("/system/basic/pos/").then(resp=>{
                      //判断如果resp存在的话，请求成功
                    if(resp){
                        //请求成功就把resp的值赋值给positions就行了
                        this.positions = resp;
                    }
                })
            }
            //编辑数据
            ,showEditView(index,data){  //index  行下表  data  这一行数据
                 console.info(index,data);
                // this.updatePos = data;//把数据赋值给要修改的内容 改的话，页面直接变化了，点击取消也会变化，
                //解决数据联动的问题，将data的值拷贝到this.updatePos去 这样如果修改弹框的页面，数据列表不会变化，优化代码
                Object.assign(this.updatePos,data);
                //弹出对话框
                 this.dialogVisible=true;
              },doUpdate(){
                this.putRequest("/system/basic/pos/",this.updatePos).then(resp=>{
                    if (resp) {
                        //刷新数据
                        this.initPositions();
                        this.updatePos.name='';//把弹框的值设置成空
                        this.dialogVisible=false; //隐藏对话框
                    }
                })
            }
              //删除数据
              ,handleDelete(index,data){

                this.$confirm('此操作将永久删除【'+data.name+'】职位, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                     this.deleteRequest("/system/basic/pos/"+data.id).then(resp=>{
                         if (resp) {
                             this.initPositions();
                         }
                     });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            }
            //添加操作
            ,addPosition(){
                //添加的时候要做判断，看用户是否输入的值，如果没输入就给错误提示
                if (this.pos.name){
                    //this.pos ：参数是pos
                    this.postRequest("/system/basic/pos/",this.pos).then(resp=>{
                        if(resp){
                            //添加成功之后需要把表格刷新一下  可以直接用initPositions，重新加载数据
                            this.initPositions();
                            //添加完成之后清空输入框
                            this.pos.name=' ';
                        }
                    })
                } else {
                    //错误提示框
                    this.$message.error("职位名称不可以为空");
                }
            }
        }
    }
</script>

<style scoped>
    .updatePosInput{
        width: 200px;
        margin-left: 8px;
    }
    .addPosInput{
        width: 300px;
        margin-right: 8px;
    }
    .posManaMain{
        margin-top: 10px;
    }
</style>